<template>
    <div>
        
     <div class="login" style="">
        <el-row>

                <div class="login_container">
                
                    <div class="login_box">
                       <el-form :rules="rules" :model="form" ref="loginFormRef" :status-icon="true">
                           
                            <el-form-item prop="username">
                                <el-input prefix-icon="el-icon-user-solid" placeholder="账号" v-model="form.username"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" prefix-icon="el-icon-lock" placeholder="密码" v-model="form.password"></el-input>
                            </el-form-item>
                                
                            <el-form-item >
                                <el-button class="btns" type="primary" @click="submitLogin">登录</el-button>
                                <el-button class="btns" type="primary" @click="resetLoginForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

           
        </el-row>
    </div>
</div>

</template>

	<script>
    import 'bootstrap/dist/css/bootstrap.min.css'
  export default {
        name: "login",
        data() {
            return {
                form:{
                    username:"",
                    password:"",
                    title:""
                },
                rules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
            }
        }
    },
  methods: {
         
            submitLogin () {
                this.$refs.loginFormRef.validate(valid => {
                    if (valid) {
                    console.log(valid)
                    //登录
                    let data = new FormData();
                    data.append("username",this.form.username);
                    data.append("password",this.form.password);
                    //let data = {username:this.form.username,password:this.form.password};
                    this.$axios.post("http://localhost:8080/tologin", data).then(res=>{
                         console.log(res.data)
                        if(res.data.status==20000){
                            this.$message({
                             message: '登陆成功',
                             type: 'success'
                                });
                           
                            this.$router.push({
                         path: '/student',
                         // name: 'mallList',
                          query: {
                            username: res.data.username
                        }
                    
                       
                 })
                }else{
                     this.$message.error('账号密码不正确');
                    this.title="用户名或密码错误"
                }
                    
                    
                    }).catch(res=>{
                         this.title="用户名或密码错误"
                        console.log(res)
                    })
                    }
                })
                
            },  resetLoginForm () {
               
                this.$refs.loginFormRef.resetFields()
            }


    
         }
    }
    </script>
    <style scoped>
 .font{
    filter:Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight: bolder ; left: 350px; top: 20px; 
    font-size: 50px;color:#aa8383;position: relative;left:16%;top:20%;
 }
 
 .login{
     height:600px;
 }
    .login_container{
        height:100px;
        margin: 200px;
        margin-left: 40%;
        padding: 10px;
        width: 300px;
         height: 200px;
        background: rgb(33, 29, 39);
        
        border-radius: 10px;
    }
    .btns{
        margin-left: 2%;
        width: 45%;
       background: rgb(102, 122, 134);
       
    }
    
    </style>